<template>
    <router-view :key="$route.fullPath" v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
</template>

<style scoped></style>
<script lang="ts" setup>
// import { ref, watch } from 'vue'
// import { useRouter, useRoute } from 'vue-router'

// const router = useRouter()
// const route = useRoute()

// const isAuthenticated = ref(!!sessionStorage.getItem('access_token'))

// 监听路由变化处理认证状态
// watch(
//   () => route.path,
//   (newPath) => {
//     if (newPath === '/login') {
//       console.info("xxxxxxxxxxxxx");
//       // isAuthenticated.value = false
//     }
//   }
// )

// const handleLogout = () => {
//   localStorage.removeItem('token')
//   isAuthenticated.value = false
//   router.push('/login')
// }
</script>

<style scoped>
.app-layout-container .el-header {
  position: relative;
  /* background-color: var(--el-color-primary-light-7); */
  color: var(--el-text-color-primary);
  border-bottom: 1px solid #dcdfe6;
}

.app-layout-container .el-aside {
  color: var(--el-text-color-primary);
  background-color: rgb(234, 234, 233);
  border-right: 1px solid rgb(232, 232, 231);
}

.app-layout-container .el-menu {
  border-right: none;
}

.el-menu {
  --el-menu-bg-color: rgb(234, 234, 233);
}

.el-menu-item {
  margin: 3px 0;
}

.el-menu-item.is-active>.el-menu-item-layer {
  background-color: rgba(64, 158, 255, 0.1);
}

.el-menu-item>.el-menu-item-layer {
  margin: 0 11px 0 12px;
  width: 100%;
  text-align: left;
  padding: 0 10px;
  border-radius: 6px;
  user-select: none;
}

.el-menu-item:hover {
  background: none;
}

.el-menu-item:hover>.el-menu-item-layer {
  /* background-color: var(--el-menu-hover-bg-color); */
  color: var(--el-menu-active-color);
}


.app-layout-container .el-main {
  padding: 0;

}

.app-layout-container .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>